/**
* VUEshop
* ============================================================================
* * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
* 网站地址: http://www.vueshop.com.cn
* ----------------------------------------------------------------------------
* 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
* 不允许对程序代码以任何形式任何目的的再发布。
* ============================================================================
* $Author: 沈小白 2020-07-22 $
*/
<template>
	<view class="content">
		<app-head bg="#ff3b3b"></app-head>
		<!-- #ifndef Mp -->
		<view class="search-box ">
			<view class="search-inner">
				<view class="search-img">
					<image class="wh100" :src="imgUrl+'common/search.png'"></image>
				</view>
				<input class="search-cont" placeholder="请输入您所搜索的商品" type="text" @tap="jumpSearch" />
			</view>
		</view>
		<!-- #endif-->
		<!--  #ifdef MP -->
		<view class="search-box">
			<view class="headBox" :style="{height:navHeight+'px'}"></view>
			<view class="search-inner">
				<view class="search-img">
					<image class="wh100" :src="imgUrl+'common/search.png'"></image>
				</view>
				<input class="search-cont" placeholder="请输入您所搜索的商品" type="text" @tap="jumpSearch" />
			</view>
		</view>
		<!-- #endif -->
		<!-- banner背景 -->
		<view class="finde_man"></view>
		<!-- 轮播图 -->
		<!-- #ifndef MP -->
		<view class="bannerBox">
			<banner></banner>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view class="bannerBox" :style="{marginTop:BannerTop+'px'}">
			<banner></banner>
		</view>
		<!-- #endif -->
		<!-- 导航栏 -->
		<index-nav></index-nav>
		<!-- 秒杀 -->
		<view class="seckill" v-if="seckill.length>0">
			<view class="seckill-time">
				<view class="classname">
					<view class="sk-tips">
						<image :src="imgUrl+'index/s2.png'"></image>
					</view>
					<view class="sk-time sk-tit">{{session}}点场</view>
					<view class='time-n'>
						<view class="sk-time skt-pub">{{hou?hou:"00"}}:</view>
						<view class="sk-time skt-pub">{{min?min:"00"}} :</view>
						<view class="sk-time">{{sec?sec:'00'}}</view>
					</view>
				</view>
				<navigator url="/pages/active/seckill_list/seckill_list">
					<image class="sk-pic" :src="imgUrl+'index/s.png'"></image> 更多
				</navigator>
			</view>
			<view class="seckill-list">
				<block v-for="(item,index) in seckill">
					<navigator
						:url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id+'&item_id='+item.item_id">
						<image
							:src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType">
						</image>
						<view class='goods_name'>{{item.goods_name}}</view>
						<view class='smj' style=''>¥</view>
						<view class="co-red">{{item.price}}</view>

						<view class='s-vol'>{{item.shop_price}}</view>
					</navigator>
				</block>
			</view>
		</view>
		<view class="without" v-else>
			<!-- <text>暂无秒杀商品~</text> -->
			<image class="imh_ima" :src="imgUrl+'index/mszc.png'"></image>
			<navigator class="imh_img" url="/pages/active/seckill_list/seckill_list">
				<image :src="imgUrl+'index/icon_flash_sale.png'"></image>
				限时抢购
			</navigator>
		</view>
		<!-- 广告图 -->
		<view class='hpics'>
			<block v-for="(item,index) in adList" :key="index">
				<navigator :url='item.ad_link' class='f-classify-s' v-if="index<4">
					<image mode='aspectFill' :src='hostUrl+item.ad_code'></image>
				</navigator>
			</block>

		</view>
		<!-- 广告图2 -->
		<block v-for="(item,index) in adList" :key="index">
			<navigator :url='item.ad_link' class='f-classify-b' v-if="index==5">
				<image mode='aspectFill' :src="hostUrl+item.ad_code"></image>
			</navigator>
		</block>
		<!-- 广告图end -->
		<!-- 热销商品 -->
		<hot-goods></hot-goods>
		<!-- 推荐商品 -->
		<feature></feature>
		<!-- 拼团列表 -->
		<spell-group></spell-group>
		<view class='newcomers' catchtouchmove="return" v-if="newcomers">
			<view class='newcomers-tec'>
				<image class='new-img' :src="imgUrl+'index/hongbao-1.png'"></image>
				<view class='newcomers-text'>
					<view class='text-auto'>
						<view class='text-an'>
							<text data-id="item.id" class='text-an2'>￥<text
									class='text-an3'>{{newcomersData[index].money}}</text>元新人红包</text>
						</view>
					</view>
					<image @tap='newdax' class='new-img3' :src="imgUrl+'index/button-1.png'"></image>
				</view>
				<image class='dax-1' @tap='daxhide' :src="imgUrl+'index/dax-1.png'"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import appHead from "@/components/app-head/app-head";
	import Banner from "@/components/banner/banner.vue";
	import IndexNav from "@/components/indexNav/index-nav.vue";
	import HotGoods from "@/components/hotGoods/hotgoods.vue";
	import Feature from "@/components/feature/feature.vue";
	import SpellGroup from "@/components/spellGroup/spellGroup.vue";
	import {
		getAd,
		getSeckill,
		getNewcomers,
		postCoupon
	} from "@/api/api.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	export default {
		components: {
			Banner,
			IndexNav,
			HotGoods,
			Feature,
			SpellGroup,
			appHead
		},
		data() {
			return {
				hostUrl: config.host, //路径前缀
				imgUrl: config.imgUrl, //图片资源前缀
				loginInfo: uni.getStorageSync('loginInfo') || null, //登录信息
				adList: "", //广告图list
				seckill: "", //秒杀list
				roundtime: "", //秒杀倒计时结束时间
				session: "12", //秒杀场次 
				day: '',
				hou: '',
				min: '',
				sec: '',
				index: 0, //新人优惠劵 返回数组，默认取0
				pid: 1, //广告id
				newcomers: false, //新人红包
				newcomersData: "",
				start_time: "", //秒杀初始时间
				end_time: "", //秒杀结束时间
				BannerTop: ""

			}
		},
		computed: {
			...mapState(['hasLogin', 'navHeight', 'navTop', 'imgType', 'goodsImgHeight', 'goodsImgWidth'])
		},
		onLoad() {
			this._getAd()
			this.getime()
			// console.log(this.navHeight)
			setTimeout(() => {
				let that = this;
				let height = "";
				let result;
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.search-box').boundingClientRect(data => {
					if (data.length > 0) {
						data.forEach(item => {
							// console.log(item)
							height = item.height
						})
						that.BannerTop = height //20是左右padding的总和
					}
				}).exec();
			}, 300)
			// this._getSeckill()
		},
		onShow() {
			if (this.hasLogin) {
				this._getNewcomers()
			}
		},
		methods: {

			_getAd() {
				/*获取banner*/
				getAd().then(res => {
					// console.log(res)
					this.adList = res.records
				})
			},
			_getSeckill() {
				/*获取秒杀列表*/

				let params = {
					"recommend": 1, //首页
					"size": "3",
					"start_time": this.start_time, //偶数级时间例如 12,16
					"end_time": this.end_time,
				}


				getSeckill(params).then(res => {
					console.log(res)
					if (res.records.length > 0) {
						this.seckill = res.records;
						this.secondKill()
					}



				})
			},
			secondKill() {
				clearInterval(timer);
				let timer = setInterval(this.getTime, 1000)

			},
			getTime() {
				var that = this;
				var timestamp = parseInt(new Date().getTime() / 1000); /*当前时间*/
				let endTime = this.seckill[0].end_time /*默认取第一个倒计时结束时间*/
				let endTimeList = [] //结束时间list 
				// 1576063260524   1576116043
				if (endTime - timestamp > 0) {
					let time = (endTime - timestamp);
					var day = parseInt(time / (60 * 60 * 24));
					var hou = parseInt(time % (60 * 60 * 24) / 3600);
					var min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
					var sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
					if (hou < 10) {
						hou = "0" + hou

					}
					that.hou = hou
					if (min < 10) {
						min = "0" + min

					}
					that.min = min
					if (sec < 10) {
						sec = "0" + sec

					}
					that.sec = sec

				} else {
					that.day = "00";
					that.hou = "00";
					that.min = "00";
					that.sec = "00";
				}
			},
			/*获取当前时间戳*/
			getime() {
				var t = new Date();
				var time = parseInt(t.getTime() / 1000); //当前时间

				var now = common.format(time) //转换后的时间   2020-01-13 18:00:00
				var num = now.indexOf(":");
				var sub = now.substring(0, num)

				var sublsat = sub.substring(sub.length - 2) //后两位数
				if (parseInt(sublsat % 2) != 0) { //获取准点场次
					sublsat = sublsat - 1
				}
				this.session = sublsat
				// console.log(sub,sub1)
				var parameter = sub.replace(sub.substring(sub.length - 2), sublsat) + ":00:00";
				// console.log(parameter)
				var date = new Date(parameter).getTime();
				this.start_time = parseInt(date / 1000)
				this.end_time = this.start_time + 7200


			},
			/*新人专享红包*/
			_getNewcomers() {
				getNewcomers().then(res => {

					if (res.length > 0) {
						this.newcomers = true;
						this.newcomersData = res;
					}

				})
			},
			jumpSearch() {
				uni.navigateTo({
					url: "/pages/goods/search/search"
				})
			},
			/*领取新人优惠劵*/
			newdax() {
				let params = {
					cid: this.newcomersData[this.index].id
				}
				this._postCoupon(params)
			},
			_postCoupon(params) {
				postCoupon(params).then(res => {
					console.log(res)
				})
			},
			/*关闭*/
			daxhide() {
				this.newcomers = false;
			}

		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;

	}

	.bannerBox {
		height: 340rpx;
	}

	.content {
		flex: 1;
		height: auto;
		background: $page-bg-color;
		padding-bottom: 120rpx;
	}

	/*搜索栏start*/
	.search-box {
		position: fixed;
		top: 0;
		left: 0;
		//#ifdef APP-PLUS
		top: var(--status-bar-height);
		// #endif
		//#ifdef H5
		top: 0rpx;
		//#endif
		width: 100%;
		//#ifdef H5
		height: auto;
		//#endif

		z-index: 10;
		background: $page-bg-color-master;

	}

	.search-inner {
		display: flex;
		align-items: center;
		margin: 15rpx 20rpx;
		width: 710rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #fefdfd;

	}

	.search-img {
		margin-right: 12rpx;
		width: 28rpx;
		height: 28rpx;
		margin-top: 0rpx;
		margin-left: 40rpx;

		.wh100 {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.search-cont {
		height: 58rpx;
		width: 536rpx;
		padding-left: 12rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: $text-color-minor;

	}

	/*banner背景色start*/
	.finde_man {
		background: $page-bg-color-master;
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 278rpx;

	}

	/*banner背景色end*/
	/*秒杀商品start*/
	.seckill {
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: $page-bg-color;
		padding-bottom: 0rpx;
		border-radius: 10rpx;
		width: 710rpx;
		overflow: hidden;
	}

	.seckill-time:after {
		content: '';
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-top: 2rpx solid $cut-bg-color;
		border-right: 2rpx solid $cut-bg-color;
		transform: rotate(45deg);
	}

	.seckill-time {
		display: flex;
		justify-content: space-between;
		padding: 5rpx 20rpx;
		align-items: center;
		height: 100rpx;
		color: $text-color;
		background: $index-bg-color;
		width: 710rpx;
		box-sizing: border-box;
		margin: 0 auto;
		border-bottom: 1px solid $cut-bg-color;
	}

	.classname {
		height: 70rpx;
		margin-right: 22rpx;
		padding-top: 40rpx;
	}

	.classname view {
		float: left;
	}

	.sk-tips {
		width: 120rpx;
		height: 30rpx;
		margin-right: 20rpx;
		margin-top: -1rpx;

		image {
			width: 120rpx;
			height: 30rpx;
		}
	}

	.sk-tit {
		background-color: $page-bg-color-master;
		color: $text-color-white;
		padding: 0 10rpx;
		height: 32rpx !important;
		line-height: 32rpx !important;
	}

	.sk-time {
		position: relative;
		display: inline-block;
		font-size: 22rpx;
		text-align: center;
		/* height:28rpx;
	    line-height:28rpx; */
	}

	.time-n {
		border: 1rpx solid $cut-bg-color-master;
		color: $text-color-master;
		padding: 0 10rpx;
		height: 32rpx;
		line-height: 32rpx;
		box-sizing: border-box;
	}

	.time-n view {
		min-width: 28rpx;
		font-weight: 600;
	}

	.skt-pub {
		margin-right: 10rpx;
	}

	.seckill-time>navigator {
		font-size: 24rpx;
		margin-right: -200rpx;
	}

	.sk-pic {
		width: 28rpx;
		height: 28rpx;
		vertical-align: top;
	}

	.seckill-list {
		height: 330rpx;
		background-color: $page-bg-color;
		white-space: nowrap;
		width: 710rpx;
		margin: 0 auto;
		overflow: hidden;
		background: $index-bg-color;
		padding-top: 20rpx;
	}

	.seckill-list navigator {
		width: 230rpx;
		background-color: $index-bg-color;
		overflow: hidden;
		margin-left: 10rpx;
		display: inline-block;
		border-radius: 10rpx;
	}

	.seckill-list navigator:first-child {
		margin-left: 0rpx;
	}

	.seckill-list image {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.seckill-list view {
		height: 40rpx;
		padding: 0 10rpx;
		line-height: 40rpx;
		overflow: hidden;
		font-size: 22rpx;
		font-weight: 600;
	}

	.seckill-list .goods_name {
		color: $text-color;
		font-weight: 500;
	}

	.smj {
		min-width: 5rpx;
		float: left;
		padding: 0 !important;
		color: $text-color-master;
		font-size: 20rpx !important;
		margin: 0rpx 5rpx 0rpx 15rpx;
	}

	.co-red {
		min-width: 5rpx;
		font-size: 26rpx !important;
		font-weight: bold;
		float: left;
		padding: 0 !important;
		color: $text-color-master;
	}

	.s-vol {
		float: left;
		color: $text-color-hint;
		text-align: right;
		font-weight: 500 !important;
		text-decoration: line-through;
	}

	/*秒杀商品end*/
	/*无秒杀商品start*/
	.without {
		padding: 0 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: $index-bg-color;
		margin: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 0;

		.imh_ima {
			width: 167rpx;
			height: 55rpx;
			display: inline-block;
			vertical-align: middle;
		}

		.imh_img {
			float: right;
			font-size: 24rpx;
			color: $text-color-hint;
			position: relative;
			line-height: 100rpx;

			image {
				width: 30rpx;
				height: 31rpx;
				margin-right: 20rpx;
				position: absolute;
				top: 35rpx;
				left: -40rpx;

			}
		}
	}

	/*无秒杀商品end*/
	/*广告图1start*/
	.hpics {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 20rpx 20rpx 0;

		.f-classify-s {
			width: 350rpx;
			height: 150rpx;

			margin-bottom: 10rpx;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/*广告图1end*/
	/*广告图2start*/
	.f-classify-b {
		width: 710rpx;
		border-radius: 10rpx;
		overflow: hidden;
		height: 188rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
			display: inline-block;
			overflow: hidden;

		}
	}

	/* 新人专享好礼 */
	.newcomers {
		position: fixed;
		top: 0;
		width: 100%;
		bottom: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 999;
		display: block;
	}

	.newcomers .newcomers-tec {
		position: relative;
	}

	.newcomers .new-img {
		width: 549rpx;
		height: 607rpx;
		margin: 0 auto;
		display: block;
		margin-top: 170rpx;
	}

	.newcomers .newcomers-text {
		position: absolute;
		top: 290rpx;
		width: 100%;
	}

	.newcomers .newcomers-text .text-auto {
		height: 214rpx;
	}

	.newcomers .newcomers-text .text-an {
		width: 430rpx;
		height: 92rpx;
		background: #f5d36a;
		border-radius: 10rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.newcomers .newcomers-text .text-an2 {
		width: 416rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		color: #ff3b3b;
		border: 1rpx solid #ff3b3b;
		font-size: 30rpx;
		border-radius: 10rpx;
	}

	.newcomers .newcomers-text .text-an3 {
		font-size: 48rpx;
		margin: 0 15rpx;
	}

	.newcomers .newcomers-text .new-img3 {
		width: 256rpx;
		height: 82rpx;
		margin: 0 auto;
		display: block;
	}

	.newcomers .dax-1 {
		width: 58rpx;
		height: 58rpx;
		display: block;
		margin: 0 auto;
		margin-top: 57rpx;
	}
</style>
